/*
 * For testing 
 */
/*
var test = Array();

test.push([1, 2]);
test.push([3, 4]);
test.push([5, 6]);
//console.log(test);
for(i in test)
{
	console.log(test[i]);
}

var json = "[[" + test.join("],[") + "]]";
//console.log(json);
var decode = jQuery.parseJSON(json);
//console.log(decode);
 */

main_canvas = new fabric.Canvas('black_board_buffer');
var board = {
	contextBoard: null,
	contextBuffer: null,
	init: function(){
		var jBufferBoard = $('#black_board_buffer'); 
		var canvas = document.getElementById('black_board_buffer');  
		board.contextBuffer = canvas.getContext("2d");
		
		canvas = document.getElementById("black_board"),
		board.contextBoard = canvas.getContext("2d");
		
		console.log(board.contextBuffer)
		jBufferBoard.mousedown(function(e){
			var sDrawType = $('#draw_type').val();
			switch(sDrawType)
			{
				case 'pen':
					board.drawPenToBuffer(this, e);
					break;
				case 'line':
					board.drawLineToBuffer(this, e);
			}
			console.log('down');
			
		});
		/*
		 * For test fabricjs
		 */
		$('#bt_save').click(function(){
			main_canvas.add(new fabric.Rect({ 
				width: 50, 
				height: 50, 
				left: 50, 
				top: 150,
				fill: 'none',
				stroke: '#666',
				angle: 40
			}));
			var circle = new fabric.Circle({
				  left: 50,
				  top: 100,
				  radius: 25,
				  fill: 'none',
				  stroke: '#666',
				  strokeWidth: 1,
				  selectable: false
			});
			circle.hasControls = false;
			console.log(circle);
			main_canvas.add(circle);
			var point1 = new fabric.Point(0, 0);
			var point2 = new fabric.Point(50, 50);
			
			var line = new fabric.Line([0, 0, 50, 50], {top: 50, left: 50});
			console.log(line);
			main_canvas.add(line);
			
			var point3 = new fabric.Point(50, -50);
			var polygon = new fabric.Polygon([point1, point2, point3], {top:200, left:50});
			main_canvas.add(polygon);
			main_canvas.add(new fabric.Triangle({
				top:50, 
				left:50,
				width: 50, 
				height: 50,}));
			main_canvas.renderAll();
			main_canvas.setActiveObject(line); 
		});
	},
	drawPenToBuffer: function(jBufferBoard, eMouseDown)
	{
		jBufferBoard = $(jBufferBoard);
		//prepare for container of all positions
		var aAllPos = [];
		
		//get and save first position 
		var aFirstPos = board.getClickPosition(jBufferBoard, eMouseDown);
        aAllPos.push(aFirstPos);
        
        //prepare path and move to first position
        board.contextBuffer.beginPath();
        board.contextBuffer.moveTo(aFirstPos[0], aFirstPos[1]);
        
        //set mouse move/up event to buffer board
		jBufferBoard.mousemove(function(e){
			console.log('move');
			
			//get and save current position
			var aCurrentPos = board.getClickPosition(this, e);
			aAllPos.push(aCurrentPos);
			
			//line to current position and draw to the screen
			board.contextBuffer.lineTo(aCurrentPos[0], aCurrentPos[1]);
	        board.contextBuffer.stroke();
	        
		}).mouseup(function(){
			console.log('up');
			
			//draw all positions to main board and send to server
			board.drawPenToBoard(aAllPos);
			board.sendDataToServer(aAllPos);
			
			//close path and clear buffer board			
			board.contextBuffer.closePath();	
			board.contextBuffer.clearRect(0, 0 , jBufferBoard.width(), jBufferBoard.height());
			
			//unset mouse move/up event to buffer board
			jBufferBoard.unbind('mousemove').unbind('mouseup');
		});
	},
	drawPenToBoard: function(aAllPos)
	{
		board.contextBoard.beginPath();
		board.contextBoard.moveTo(aAllPos[0][0], aAllPos[0][1]);
		aAllPos.shift();
		for(var i in aAllPos)
		{
			board.contextBoard.lineTo(aAllPos[i][0], aAllPos[i][1]);
		}
		board.contextBoard.stroke();
		board.contextBoard.closePath();
	},
	drawLineToBuffer: function(jBufferBoard, eMouseDown)
	{
		jBufferBoard = $(jBufferBoard);
		
	},
	drawArcToBoard: function()
	{
		board.contextBoard.arc(100, 100, 20, 0, Math.PI*3/2, true);
		board.contextBoard.stroke();
	},
	sendDataToServer: function(aAllPos)
	{
		sJsonAllPos = "[[" + aAllPos.join("],[") + "]]";
		jQuery.ajax ({
			type : 'POST',
			url : '/channel_chat',
			data : {action:'send_board_path', all_pos: sJsonAllPos, email: sEmail},
			error: function(jqXHR, textStatus, errorThrown){
				alert('Network error');
				window.location.reload();
			}
		});
	},
	getClickPosition: function(jBoard, e){
		var x;
		var y;
		if (e.originalEvent.layerX && e.originalEvent.layerY) { 
		  x = e.originalEvent.layerX;
		  y = e.originalEvent.layerY;
		}
		else { 
		  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
		  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
		} 
		x -= jBoard.offsetLeft;
		y -= jBoard.offsetTop;
		return [x, y];
	}
}

jQuery(document).ready(function() {
	board.init();
});